<template>
    <div>
        <div class="topfixed">
            <header class="header index-header">
                <router-link to="/gpsCitys" class="a_city">
                    <i class="all_bg"></i>
                    <span>{{interceptStr(selectedCity.cityname)}}</span>
                </router-link>
                <div class="head-search">
                    <form action="" @submit.prevent="queryGoods"><input type="search" v-model="searchName" placeholder="请输入商户名或品类"></form>
                    <i class="all_bg search" @click="queryGoods"></i>
                </div>
            </header>
        </div>

        <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
            <div class="content index-content">
                <div class="index-category">
                    <ul class="ul-list">
                        <li v-for="v in getNavigationMap">
                            <!--<router-link :to="{name:'goodslist',params:{navigation:v}}"><i><img :src="getImgBaseUrl+v.pictureAddress" width="40" height="40"></i> <span>{{v.modelName}}</span>-->
                            <router-link :to="{name:'goodslist',params:{navigation:v}}"><i><img :src="v.pictureAddress" width="40" height="40"></i> <span>{{v.modelName}}</span>
                            </router-link>
                        </li>
                    </ul>
                </div>

                <div class="banner">
                    <mt-swipe :auto="4000" style="height: 129px;">
                        <mt-swipe-item :key="i" v-for="(v,i) in pictureList"><a :href="v.pictureConnection"><img style="height: 100%" :src="v.pictureAddress"></a></mt-swipe-item>
                    </mt-swipe>
                </div>
                <div class="itemlist">
                    <!-- <div class="itemtop">
                      <h3>热门商户</h3>
                    </div> -->
                    <div class="itemtop tab">
                        <p class="itemtop-tab on">热门商户<em class="line"></em></p>
                        <p class="itemtop-tab" @click="gocenter">我的中心</p>
                    </div>
                    <!--热门商户和商户列表 共用的组件-->
                    <customerList></customerList>
                </div>
            </div>
        </mt-loadmore>

        <a class="my-link-icon" v-if="yanQian.careBossState==1||yanQian=='1'" :href="yanQian.vouchersUrlId"></a>

        <form method="post" id="toMycenter" :action="etsUrl+'h5pay/myCenter.do?newVersion=1.0'">
            <input type="hidden" :value="val" :name="key" v-for="(val,key) in toMycenter"/>
        </form>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import util from '@/util/util'
    import store from '@/assets/images/store.jpg'
    import customerList from '@/components/customerList'
    import { Toast,Indicator } from 'mint-ui';

    export default {
        name: 'index',
        components:{customerList},
        methods:{
            //下拉刷新
            loadTop() {
                // load more data
                this.searchName = '';
                this.queryGoods();//下拉刷新
                this.$refs.loadmore.onTopLoaded();

            },
            //下拉刷新释放
            loadBottom(){
                // 加载更多数据
                this.allLoaded = true;// 若数据已全部获取完毕
                this.$refs.loadmore.onBottomLoaded();
            },
            queryGoods(){
                document.activeElement.blur();
                console.log(this.searchName);
                var params = {
                    type:'typesearch',//首页加载和过渡搜索同一个方法，用type区分
                    searchName:this.searchName,//搜索关键字

                    cityId:this.selectedCity.cityno,//城市编号
                    longitude:this.longitude,//经度
                    latitude:this.latitude//纬度

                    /*
                     *  可选参数
                     *  参数：number 每页数量
                     *  参数：pages 当前页
                     *  hotBusiness     参数“1”代表热门，不传则是全部
                     */
                };
                if(this.searchName===''||this.searchName==null){
                    params.hotBusiness = '1';//当用户输入空字符串的时候只重置列表的数据，并且都是热门的
                }
                this.$store.dispatch('loadIndexData',params).then(resp=>{
                    console.log(resp.data);
                    this.$store.commit('setHotMap',resp.data);//只改变中间的内容
                });
            },
            //给字符串长度大于3的该字符串后面加上...
            interceptStr(str){
                return util.interceptStr(str,3);
            },
            async gocenter(){
                let params = {
                    pickupUrl:this.etsUrl+'service/index.html?'+this.getYanQianParam,//返回地址
                    version:'1.0',
                    merchantId:this.toMycent
                }
                await util.axiosPost('/service/consume/ToMycenterServlet.do',params).then(resp=>{

               	   this.toMycenter = resp.data;

               });
                //用表单提交不用href是因为有转码的问题，href是url拼字符串
               document.getElementById('toMycenter').submit();
            },
            load(){
                console.log('index您的位置new：'+this.longitude+','+this.latitude);

                console.log(location.search);
                let search = location.search.substring(1,location.search.length);

                //第一步验签
                let res = util.convertUrlToJSON(search);
                //alert(JSON.stringify(res));
                var rs = this.$store.dispatch('checkUrlData',res);
                rs.then(resp=>{
                    if(resp.data.state==='success'){
                        this.getYanQianParam = resp.data.backUrlparamter;
                        this.$store.commit('setYanQianParam',resp.data.backUrlparamter);//把验签的参数保存下来，方便下次使用
                        this.yanQian = resp.data;//验签数据
                        this.toMycent=resp.data.sysid;//商户编号

                        this.$store.commit('setYanQian',resp.data);
                        console.log(this.yanQian);

                        var params = {
                            cityId:this.selectedCity.cityno,//城市编号
                            longitude:this.longitude,//经度
                            latitude:this.latitude//纬度
                        };
                        this.$store.dispatch('loadIndexData',params).then(resp=>{
                            console.log(resp.data);
                            this.$store.commit('setHotMap',resp.data);
                            this.$store.commit('setNavigationMap',resp.data);
                            this.$store.commit('setADVLST',resp.data);
                        });
                    }else{
                        Toast({
                            message:'验签失败'//,
                            //className:'mint-toast-icon mintui mintui-success'
                        });
                    }
                })
            }
        },
        created(){
            Indicator.open();//遮罩层
        },
        mounted() {
            this.$store.dispatch('jingWeiData').then(rs=>{
                console.log(rs);
                this.$store.commit('setJingWei2',rs);//设置经纬度
                this.load();
                Indicator.close();//数据请求完，关闭遮罩层
            });
        },
        computed: {
            pictureList(){
                return this.$store.getters.getADVLST&&this.$store.getters.getADVLST[0]?this.$store.getters.getADVLST[0].pictureList:null;
               //return null;
            },
            ...mapGetters({
                HotMap:'getHotMap',
                getNavigationMap:'getNavigationMap',
                etsUrl:'getEtsUrl',
                //getImgBaseUrl:'getImgBaseUrl',
                selectedCity:'getSelectedCity',//选中的城市
                longitude:'getLongitude',//经度
                latitude:'getLatitude'//纬度
            })
        },
        data() {
            return{
                clock:function(){},
                store,
                searchName:'',
                toMycenter:{},
                getYanQianParam:'',
                yanQian:{},//验签返回的数据
                allLoaded:false,//下拉刷新
                toMycent:''//商户编号
            }

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .bg-gray {
        width: 100%;
        height: 100%;
        background-color: #f2f2f2;
        position: inherit;
        left: 0;
        top: 45px;
        z-index: 30;
        margin-top: 0;
        /* margin-top: 41px; */
        overflow: auto;
    }
</style>
